<template>
  <!-- hidden PageHeaderWrapper title demo -->
  <page-header-wrapper :title="false" content="基本表单">
    <a-card :body-style="{padding:'24px, 32px'}">
      <a-form @submit="handleSubmit" :form="form">
        <a-alert
          v-if="isError"
          type="error"
          style="margin-bottom:20px"
          showIcon
          message="必填项没有填写，请确认" />
        <a-form-item
          label="标题"
          :labelCol="{lg:{span:7}, sm:{span:7}}"
          :wrapperCol="{lg:{span:10}, sm:{span:12}}">
          <a-input
            name="title"
            placeholder="请输入标题"
            v-decorator="[
              'title',
              {rules:[{required:true, message:'标题不能为空'}], validateTrigger:'blur'}
            ]"/>
        </a-form-item>
        <a-form-item
          label="开始/终了时间"
          :labelCol="{lg:{span:7}, sm:{span:7}}"
          :wrapperCol="{lg:{span:10}, sm:{span:12}}">
          <a-range-picker
            name="buildTime"
            style="width:100%"
            v-decorator="[
              'buildTime',
              {rules:[{required:true, message:'时间不能为空'}], validateTrigger:'change'}
            ]"/>
        </a-form-item>
        <a-form-item
          label="描述"
          :labelCol="{lg:{span:7}, sm:{span:7}}"
          :wrapperCol="{lg:{span:10}, sm:{span:12}}">
          <a-textarea
            rows="4"
            name="description"
            placeholder="请输入描述内容"
            v-decorator="[
              'description',
              {rules:[{required:true, message:'描述内容不能为空'}], validateTrigger:'blur'}
            ]"/>
        </a-form-item>
        <a-form-item
          label="111"
          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
          :wrapperCol="{lg: {span: 10}, sm: {span: 12} }"
          :required="false"
        >
          <a-input :placeholder="111" />
        </a-form-item>
        <a-form-item
          label="单项选择"
          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
          :required="false"
          help="partially"

        >
          <a-radio-group v-decorator="['target', { initialValue: 1 }]">
            <a-radio :value="1">radio1</a-radio>
            <a-radio :value="2">radio2</a-radio>
            <a-radio :value="3">radio3</a-radio>
          </a-radio-group>
          <a-form-item v-show="form.getFieldValue('target') === 2">
            <a-select mode="multiple">
              <a-select-option value="4">{{ $t('form.basic-form.option.A') }}</a-select-option>
              <a-select-option value="5">{{ $t('form.basic-form.option.B') }}</a-select-option>
              <a-select-option value="6">{{ $t('form.basic-form.option.C') }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-form-item>
        <a-form-item
          :wrapperCol="{ span: 24 }"
          style="text-align: center"
        >
          <a-button htmlType="submit" type="primary">{{ $t('form.basic-form.form.submit') }}</a-button>
          <a-button style="margin-left: 8px">{{ $t('form.basic-form.form.save') }}</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>

<script>
export default {
  name: 'BaseForm',
  data () {
    return {
      form: this.$form.createForm(this),
      isError: false,
      timer: null,
      iNum: 1
    }
  },
  beforeCreate () {
      console.log('beforeCreate')
    },
  created () {
    console.log('created')
  },
  deforeMount () {
    console.log('deforeMount')
  },
  mounted () {
    console.log(this.timer)
    console.log('mounted')
  },
  beforeDestroy () {
    console.log('beforeDestory')
  },
  destroyed () {
    console.log('destoryed')
  },
  // beforeRouteLeave (to, from, next) {
  //   debugger
  //   this.$destroy()
  //   next()
  // },
  methods: {
    // handler
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (err) {
          this.isError = true

          this.timer = setTimeout(() => {
            this.isError = false
            this.iNum++
            console.log('iNum', this.iNum)
          }, 3000)

          // this.$once('hook:beforeDestroy', () => {
          //   console.log('timer', this.timer)
          //   console.log('开始销毁定时器')
          //   clearTimeout(this.timer)
          // })
        } else {
          this.isError = false
          console.log('Received values of form: ', values)
          console.log('Received values of form: ', values)
        }
      })
    }
  }
}
</script>
